<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客主页</title>
  <link rel="stylesheet" href="index.css">
  <script src="index.js"></script>
</head>
<body>

<header class="navbar">
  <div class="logo">GreenBlog</div>
  <nav class="nav-links" id="navLinks">
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">关于</a>
    <a href="#">联系</a>
  </nav>
  <div class="menu-toggle" id="menuToggle">&#9776;</div>
</header>

<section class="hero">
  <h1>欢迎来到绿色博客</h1>
  <p>记录生活 | 分享见解 | 绿意盎然</p>
</section>

<main class="container">
  <section class="main-content">
    <article class="post-card">
      <h2>初夏的绿意</h2>
      <p>走进六月，万物复苏，一切都像刚睡醒的样子……</p>
      <a href="#">阅读全文 →</a>
    </article>

    <article class="post-card">
      <h2>生态环保的力量</h2>
      <p>从一棵树开始，从一次垃圾分类做起，绿色生活触手可及。</p>
      <a href="#">阅读全文 →</a>
    </article>
  </section>

  <aside class="sidebar">
    <div class="widget">
      <h3>热门标签</h3>
      <div class="tags">
        <span>自然</span><span>环保</span><span>摄影</span><span>旅行</span>
      </div>
    </div>
    <div class="widget">
      <h3>关于作者</h3>
      <p>绿色爱好者，记录每一次心动与思考。</p>
    </div>
  </aside>
</main>

<footer class="footer">
  <p>&copy; 2025 GreenBlog | 联系我们：green@example.com</p>
</footer>
</body>
</html>
